﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>监听属性</title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <b>请输入姓名：</b><br>
        <b>姓：</b><input type="text" ng-model="lastName"><br>
        <b>名：</b><input type="text" ng-model="firstName"><br>
        <h1>{{ lastName + " " + firstName }}</h1>
        <h2>{{ fullName }}</h2>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.lastName = "";
            $scope.firstName = "";

            //监听lastName的变化，更新fullName
            $scope.$watch('lastName', function () {
                $scope.fullName = $scope.lastName + " " + $scope.firstName;
            });

            //监听firstName的变化，更新fullName
            $scope.$watch('firstName', function () {
                $scope.fullName = $scope.lastName + " " + $scope.firstName;
            });
        });
    </script>
</body>
</html>